<template>
  <div class="advisory-notice-content w-[1440px]  bg-white mx-auto mt-[18px] rounded-[4px]  p-[12px] mb-[80px]">
    <ul class="flex flex-col  overflow-y-auto">
      <li v-for="(item, index) in data" :key="index" class="flex flex-row justify-between items-center h-[58px] border-b-[1px] border-b-[#E5E5E5]">
        <div class="flex flex-col flex-1">
          <div class="flex flex-row flex-1 mb-[4px]">
            <div class="flex flex-1 flex-row items-center">
              <div class="label w-[40px] h-[18px] text-[12px] text-[#126EDF] bg-[#E8F3FF] rounded-[2px] text-center leading-[18px]">
                {{ $t('common.serialNumber') }}{{ index + 1 }}
              </div>
              <el-link type="primary" :href="`/advisoryNotice/detail?id=${item.uuid}`" target="_blank" :underline="false" class="infoTitle flex-1 ml-[4px] text-[14px] text-[#126EDF] leading-[20px] font-[500] max-w-[1172px] text-nowrap overflow-hidden text-ellipsis ">
                {{ item.title }}
              </el-link>
            </div>
          </div>
          <div class="infoType w-[176px] h-[18px] leading-[20px] text-[#333] text-[12px]">
            {{ type[item.categoryId] }}
          </div>
        </div>
        <div class="infoTime text-[14px] text-[#666]">
          {{ item.publishTime }}
        </div>
      </li>
    </ul>
    <slot />
  </div>
</template>

<script setup>
defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
})
const { t } = useI18n()

const type = {
  1: `【${t('announcement.regulations')}】`,
  2: `【${t('announcement.news')}】`,
  3: `【${t('announcement.knowledge')}】`,
  4: `【${t('announcement.notice')}】`,
}
</script>

<style lang="scss" scoped>
.infoTitle{
  :deep(.el-link__inner){
    display: block;
    max-width: 1172px;
    white-space: nowrap;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  justify-content: flex-start;
}
</style>
